<template>
    <el-container style=" border: 1px solid #eee">
        <el-container>
            <el-header style="text-align: left; font-size: 16px">
                <div>
                    <el-button style="margin-left: 0px"  :type="button1" @click.native="topclick()" >一级分类</el-button>
                    <el-button style="margin-left: 20px" :type="button2" @click.native="secclick()">二级分类</el-button>
                    <el-button style="margin-left: 20px" :type="button3" @click.native="thrclick()">三级分类</el-button>
                </div>
            </el-header>

            <el-main>
                <div v-if="item.topflag">
                    <topclassification></topclassification>
                </div>
                <div  v-if="item.secflag">
                    <secclassification></secclassification>
                </div>
                <div  v-if="item.thrflag">
                    <thrclassification></thrclassification>
                </div>

            </el-main>
        </el-container>
    </el-container>
</template>

<script>
    import topclassification from "./topclassification.vue"
    import secclassification from "./secclassification.vue";
    import Thrclassification from "./thrclassification";


    export default {
        name: "classification",
        components: {Thrclassification, topclassification,secclassification},
        data() {
            const item = {
                topflag:true,
                secflag:false,
                thrflag:false
            };
            return {
                /*tableData: Array(5).fill(item)*/
                item,
                button1: 'warning',
                button2: 'primary',
                button3: 'primary'

            }
        },
        component:{
            topclassification,
            secclassification,
            Thrclassification
        },
        methods:{
            topclick(){
                this.button1 = 'warning'
                this.button2 = 'primary'
                this.button3= 'primary'
                this.item.topflag=true
                this.item.secflag=false
                this.item.thrflag=false

            },
            secclick(){
                this.button1 = 'primary'
                this.button2 = 'warning'
                this.button3= 'primary'
                this.item.topflag=false
                this.item.secflag=true
                this.item.thrflag=false

            },
            thrclick(){
                this.button1 = 'primary'
                this.button2 = 'primary'
                this.button3= 'warning'
                this.item.topflag=false
                this.item.secflag=false
                this.item.thrflag=true
            },

        },
        created(){
            let query = this.$route.query;
            console.info(query)
            if(query !=null){
                if(query.type==2){
                    this.secclick();
                }
                if(query.type==3){
                    this.thrclick();
                }
            }
        }
    };

</script>

<style scoped >
    .el-header {
        background-color: #cbd1d0;
        color: #333;
        line-height: 60px;
    }
    .el-aside {
        color: #333;
    }
</style>
